<!--
/**
* @name OperateTable
* @description 新增编辑表格
* @author wind-lc
* @date 2020-05-25
* @param {Boolean} operateVisible 是否打开新增和编辑抽屉
* @param {Object} operateData 新增和编辑抽屉数据
* @param {Event} handleVisible 关闭新增和编辑抽屉
* @example <operate-table :operateVisible="" :operateData="" @handleVisible=""></operate-table>
*/
-->
<template>
  <a-drawer :title="title"
            :width="1000"
            :visible="operateVisible"
            :destroyOnClose="true"
            @close="handleVisible">
    <div class="drawer-wrap">
      <form-loading :formLoadingVisible="formLoadingVisible"></form-loading>
      <a-form-model ref="form"
                    :rules="rules"
                    :model="form"
                    :label-col="labelCol"
                    :wrapper-col="wrapperCol">
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-model-item label="规则名称"
                               prop="name">
              <a-input v-model="form.name"
                       placeholder="请输入规则名称"
                       :maxLength="100">
              </a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="限产百分比"
                               prop="restrictionPercent">
              <a-input-number v-model="form.restrictionPercent"
                              :min="0"
                              :max="50"
                              class="input-width"
                              placeholder="请输入限产百分比">
              </a-input-number>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="预警等级"
                               prop="warningLevel">
              <a-select v-model="form.warningLevel"
                        placeholder="请选择预警等级">
                <a-select-option v-for="(item,index) in warningLevelList"
                                 :key="index"
                                 :value="item.value">{{item.name}}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="24">
            <a-form-model-item label="规则备注"
                               :label-col="{ span: 3}"
                               :wrapper-col="{ span: 20 }"
                               prop="remark">
              <a-input type='textarea'
                       :autoSize="{minRows: 5,maxRows: 5}"
                       v-model="form.remark"
                       :maxLength="100"
                       placeholder="请输入规则备注">
              </a-input>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="24">
            <a-form-model-item label="选择范围"
                               :label-col="{ span: 3}"
                               :wrapper-col="{ span: 20 }"
                               prop="scope">
              <a-tree-select v-model="form.scope"
                             :tree-data="treeData"
                             tree-checkable
                             search-placeholder="请选择选择范围" />
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
      <div class="drawer-footer">
        <a-button key="back"
                  @click="handleVisible">取消</a-button>
        <a-button key="submit"
                  type="primary"
                  :loading="confirmLoading"
                  @click="handleConfirm">提交</a-button>
      </div>
    </div>
  </a-drawer>
</template>
<script>
import { Drawer, FormModel, Row, Col, Input, InputNumber, Button, Select, TreeSelect } from 'ant-design-vue'
export default {
  name: 'OperateTable',
  components: {
    ADrawer: Drawer,
    AFormModel: FormModel,
    AFormModelItem: FormModel.Item,
    ARow: Row,
    ACol: Col,
    AInput: Input,
    AInputNumber: InputNumber,
    AButton: Button,
    ASelect: Select,
    ASelectOption: Select.Option,
    ATreeSelect: TreeSelect
  },
  props: {
    // 是否打开新增和编辑抽屉
    operateVisible: {
      type: Boolean,
      required: true
    },
    // 新增和编辑抽屉数据
    operateData: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      // 标题
      title: '',
      // 表单
      form: {
      },
      // 预警等级列表
      warningLevelList: [
        {
          value: 0,
          name: '黄色预警'
        }
      ],
      // 区域
      treeData: [
        {
          title: '湖北',
          value: '0-0',
          key: '0-0',
          children: [
            {
              title: '武汉',
              value: '0-0-0',
              key: '0-0-0'
            }
          ]
        },
        {
          title: '四川',
          value: '0-1',
          key: '0-1',
          children: [
            {
              title: '成都',
              value: '0-1-0',
              key: '0-1-0',
              children: [
                {
                  title: '武侯',
                  value: '0-1-0-0',
                  key: '0-1-0-0'
                },
                {
                  title: '青羊',
                  value: '0-1-0-1',
                  key: '0-1-0-1'
                }
              ]
            },
            {
              title: '自贡',
              value: '0-1-1',
              key: '0-1-1'
            },
            {
              title: '绵阳',
              value: '0-1-2',
              key: '0-1-2'
            }
          ]
        }
      ],
      // 表单布局
      labelCol: { span: 6 },
      wrapperCol: { span: 16 },
      // 校验
      rules: {

      },
      // 表单加载loading
      formLoadingVisible: false,
      // 提交loading
      confirmLoading: false
    }
  },
  watch: {
    // 监听抽屉打开关闭
    operateVisible: {
      handler (newV, oldV) {
        // 打开抽屉
        if (newV) {
          // 新增
          if (this.operateData.type === 'add') {
            this.title = '新增规则'
            // this.formLoadingVisible = true
          }
          // 编辑
          if (this.operateData.type === 'edit') {
            this.title = '编辑规则'
            this.formLoadingVisible = true
          }
        }
      }
    }
  },
  methods: {
    // 确定按钮
    handleConfirm () { },
    // 关闭抽屉
    handleVisible () {
      this.$confirm({
        title: '放弃本次操作并清空表单?',
        okText: '是',
        okType: 'danger',
        cancelText: '否',
        onOk: () => {
          // this.form = {
          //   code: '',
          //   name: '',
          //   status: '',
          //   remark: ''
          // }
          // this.treeData = []
          // this.checkedKeys = []
          this.$emit('handleVisible', false)
          this.$message.success('表单已清空!')
        }
      })
    },
    // 提交关闭抽屉
    handleConfirmVisible (text) {
      // this.form = {
      //   code: '',
      //   name: '',
      //   status: '',
      //   remark: ''
      // }
      // this.treeData = []
      // this.checkedKeys = []
      // this.editId = ''
      this.$emit('handleVisible', false)
    }
  }
}
</script>
<style lang="scss">
</style>
